<template>
    <ph-action-bar class="ph-dt-footer">
        <div class="ph-left" v-if="umode==Mode.datetime">
            <ph-button :type="theme" :mini="true" v-if="mode!=Mode.time" @click="$emit('time-navigate')">{{langs.timeSetting}}</ph-button>
        </div>
        <div class="ph-left" v-else>
            <div class="ph-date-preview">{{dpreview}}</div>
        </div>
        <div class="ph-right">
            <ph-button v-if="clear" :type="theme" :mini="true" @click="$emit('clear')">{{langs.clear}}</ph-button>
            <ph-button :disabled="disabledNow" v-if="now" :type="theme" :mini="true" @click="$emit('now')">{{langs.now}}</ph-button>
            <template v-if="umode==Mode.datetime||umode==Mode.time">
                <ph-button :disabled="disabled" :type="theme" :mini="true" @click="$emit('done')">{{langs.done}}</ph-button>
            </template>
        </div>
    </ph-action-bar>
</template>
<script lang="ts">
import { computed, defineComponent, PropType, toRefs } from 'vue'
import {Mode} from './config'
import {datefmt,date2number,dgmap,kmap} from '../../shared/datetime'
import {PhActionBar,PhButton} from '../base'
export default defineComponent({
    components:{PhActionBar,PhButton},
    props:{
        theme:{type:String},
        langs:{type:Object as PropType<Record<string,unknown>>},
        mode:{type:Number},
        umode:{type:Number},
        vDo:{type:Object as PropType<{[k:string]:number}>,default:()=>({})},
        min:{type:[Object,Boolean]},
        max:{type:[Object,Boolean]},
        format:{type:String,default:""},
        clear:{type:Boolean,default:true},
        now:{type:Boolean,default:true},
    },
    setup(props){
        const {min,max,vDo} = toRefs(props) as any
        const dpreview = computed(()=>{
            return datefmt(props.vDo,props.format)
        })
        const isDisabled = (c:number,s:number,e:number)=>{
            if(!c)return false
            if(s&&e)return c<s||c>e
            if(s)return c<s
            if(e)return c>e
            return false
        }
        const disabled = computed(()=>{
            const fmtks = props.format.match(/([yMdhms]+)/g)||[]
            const kseq = Object.keys(kmap).filter(k=>fmtks.includes(k))
            const c = date2number(kseq.map(k=>vDo.value[k]))
            const s = min.value?date2number(kseq.map(k=>min.value[k])):0
            const e = max.value?date2number(kseq.map(k=>max.value[k])):0
            return isDisabled(c,s,e)
        })

        const disabledNow = computed(()=>{
            const fmtks = props.format.match(/([yMdhms]+)/g)||[]
            const kseq = Object.keys(kmap).filter(k=>fmtks.includes(k))

            const s = min.value?date2number(kseq.map(k=>min.value[k])):0
            const e = max.value?date2number(kseq.map(k=>max.value[k])):0
            const c = date2number(kseq.map(k=>{
                return (new Date() as any)[dgmap[k]]() as number
            }))
            return isDisabled(c,s,e)
        })
        return {Mode,dpreview,disabled,disabledNow}
    }
})
</script>